<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客系统登录页面</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog_login.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./imag/logo.jpg" alt="博客图标">
        <span class="title">博客系统</span>
        <!-- 用于将图片 和 超链接分割开 -->
        <div class="splacer"></div>
        <!-- <div class="loader"></div> -->
        <a href="./blog_all_list.html">推荐文章</a>
    </div>
    <!-- 贯穿整个页面的容器 -->
    <div class="login-container">
        <!-- 垂直居中的登录框 -->
        <div class="login-frame">
            <h2>欢迎登录个人博客</h2>
            <div class="row">
                <span>用户名:</span>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="row">
                <span>密码:</span>
                <input type="password" id="password" placeholder="请输入该用户密码">
            </div>
            <div class="row">
                <span>验证码:</span>
                <input type="text" id="imagcode" placeholder="请输入下面图形验证码">
            </div>
            <div class="row">
                <img src="/imag/getcode" id="imag-code" onclick="refresh()" alt="图形验证码"> &nbsp;&nbsp;&nbsp;
                <div id="spanDiv">点击图片换一张</div>
            </div>
            <div class="srow">
                <button id="submit" onclick="myblog()">登 录</button>
            </div>
            <div class="reg">
                <a href="./blog_register.html">没有账号？去注册！</a>
            </div>
        </div>
    </div>
</body>
<script>

    /* 刷新验证码 */
    function refresh() {
        document.getElementById("imag-code").src = "/imag/getcode?time=" + new Date().getTime();
    }

    function myblog() {
        //1、非空参数的校验
        let _username = jQuery("#username");
        let _password = jQuery("#password");
        let _imagcode = jQuery("#imagcode");

        if (_username.val() == "") {
            alert("请输入用户名!");
            _username.focus();
            return;
        }
        if (_password.val() == "") {
            alert("请输入该用户的密码!");
            _password.focus();
            return;
        }
        if (_imagcode.val() == "") {
            alert("请输入下面图片验证码!");
            _password.focus();
            return;
        }
        //2、通过ajax发送数据给后端
        jQuery.ajax({
            url: "/user/login",
            type: "POST",
            data: { "username": _username.val(), "password": _password.val(), "imagcode": _imagcode.val() },
            success: function (result) {
                if (result != null && result.code == 200 && result.data != null) {
                    // 此时登录成功
                    location.href = "/blog_list.html";
                } else if (result.code == -2) {
                    // 验证码输入错误
                    alert("图片验证码输入错误，请重新输入!");
                    _imagcode.val('');
                    refresh();
                } else {
                    alert("登录失败，用户名/密码输入错误，请重新输入!");
                    _username.val('');
                    _password.val('');
                    _imagcode.val('');
                    refresh();
                }
            }
        });
    }


</script>

</html>